<template>
    <el-card :body-style="{ padding: '0px',height:'300px',textAlign:'center' }" shadow="hover">
      <img :src="getlocalhost+b.imgUrl" class="image">
      <div style="padding: 14px;">
        <span class="book-name">{{b.bookName}}</span>
        <div class="bottom clearfix">
            {{b.author}}
        </div>
      </div>
    </el-card>
</template>
<script>

// import axios from '../../api/fech.js''http://localhost:10000'+
// const A = new axios();
export default{
 props:{
     b:{
      type:Object,
      default:{
            Bname:"xxx",
            title:"xxxxxxxxxxxxx",
            url:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
            bId:1
        }
     }
    
 },
  data(){
      return{
        img:""
      } 
        
    },
   async created(){
      
      // const imgurl = this.b.imgUrl.substr(-21);
      // console.log(this.b.imgUrl);
      // console.log(imgurl);
      //  axios.get(imgurl).then((e)=>{
      //    console.log(e)
      //  },(e)=>{
      //    console.log(e);
      //  });
      // console.log(result);
      // this.img =  result;
    },
    methods:{
     
    },
    computed:{
       getlocalhost(){
            return this.$axios.defaults.baseURL
        }
    }
}
</script>
<style lang="less" scoped>
.book-name{
  font-weight: 700;
  font-size: 15px;
  display: block;
   overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}
.image{
  width: 90%;
  height: 75%;

}
.bottom{
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>